/*
 * @Author: Await
 * @Date: 2025-05-08 16:27:00
 * @LastEditors: Await
 * @LastEditTime: 2025-05-10 15:14:00
 * @Description: 3D路径图组件
 */
import React, { useRef, useEffect, useState } from 'react';
// 移除静态导入，使用动态加载策略
// import 'echarts-gl'; // 引入3D扩展
import { ChartConfig, DataItem, DataConfig, ThemeOption } from '../../types/index';
import ChartBase, { ChartBaseRef } from './ChartBase/index';
import { ChartType } from '../../types/chartTypes';
import { validateLines3DData, createDefaultData } from './debug-lines3d';

// 定义组件Props接口
interface Path3DChartProps {
    config?: ChartConfig;
    data?: DataItem[];
    dataConfig?: DataConfig;
    theme?: ThemeOption | string;
    height?: string | number;
    width?: string | number;
}

/**
 * 3D路径图组件
 * 用于展示三维空间中的路径连接数据
 * 
 * 注意：lines3D要求特定的数据格式 - 三层嵌套数组
 * 第一层：多条线的集合 []
 * 第二层：每条线的点集合 [[]]
 * 第三层：每个点的[x,y,z]坐标 [x,y,z]
 * 完整格式: [ [ [x1,y1,z1], [x2,y2,z2], ... ] ]
 */
const Path3DChart: React.FC<Path3DChartProps> = ({
    config: inputConfig,
    data = [],
    dataConfig,
    theme,
    height = '400px',
    width = '100%'
}) => {
    const chartRef = useRef<ChartBaseRef>(null);
    const [testData, setTestData] = useState<any[]>([]);
    // 创建一个可变的内部配置对象，确保有默认的type
    const [chartConfig, setChartConfig] = useState<ChartConfig>({
        type: ChartType.PATH_3D,
        series: [],
        ...inputConfig
    });

    // 生成测试用的静态3D路径数据
    const getStaticTestData = (): any[] => {
        // 创建一个简单的螺旋线
        const spiral = [];
        for (let t = 0; t < 10; t += 0.1) {
            const x = Math.cos(t) * t * 0.2;
            const y = Math.sin(t) * t * 0.2;
            const z = t * 0.2;
            spiral.push([x, y, z]);
        }
        return [spiral]; // 注意：返回三层嵌套数组，必须为 [lines]
    };

    // 初始化测试数据
    useEffect(() => {
        console.log('初始化3D路径图测试数据');
        // 使用简单的测试数据
        const staticData = getStaticTestData();
        console.log('生成的测试数据：', staticData);
        setTestData(staticData);
    }, []);

    // 当输入配置变化时，更新内部配置
    useEffect(() => {
        setChartConfig(prev => ({
            ...prev,
            ...inputConfig
        }));
    }, [inputConfig]);

    // 准备最终的图表配置
    useEffect(() => {
        if (!chartRef.current) return;

        // 创建配置副本，避免修改原始对象
        const config = { ...chartConfig };

        console.log('准备3D路径图配置');

        // 确保config中有正确的seriesItem配置
        if (!config.series || config.series.length === 0) {
            config.series = [{
                type: ChartType.PATH_3D, // 使用枚举值或字符串 'lines3D'
                coordinateSystem: 'cartesian3D', // 明确指定坐标系统
                effect: { show: false }, // 禁用动态效果，减少渲染错误
                lineStyle: {
                    width: 4,
                    opacity: 1,
                    color: config.color?.[0] || '#1890ff'
                },
                data: testData, // 直接使用测试数据
                animation: false
            }];
        } else if (config.series && config.series.length > 0) {
            // 确保已有系列使用正确的类型
            config.series = config.series.map((series: any) => ({
                ...series,
                type: ChartType.PATH_3D, // 使用枚举值或字符串 'lines3D'
                coordinateSystem: 'cartesian3D', // 明确指定坐标系统
                effect: { show: false }, // 禁用动态效果
                lineStyle: {
                    ...series.lineStyle,
                    width: series.lineStyle?.width || 4,
                    opacity: series.lineStyle?.opacity || 1
                },
                data: testData, // 直接使用测试数据
                animation: false
            }));
        }

        // 确保图表类型设置为PATH_3D
        if (config.type !== ChartType.PATH_3D) {
            config.type = ChartType.PATH_3D; // 使用枚举值或字符串 'lines3D'
        }

        // 添加自定义属性，TypeScript不会检查这些属性
        const fullConfig = config as any;

        // 明确添加3D坐标系设置
        fullConfig.grid3D = {
            show: true, // 显示网格
            boxWidth: 200,
            boxDepth: 80,
            boxHeight: 100,
            environment: 'auto', // 环境贴图
            viewControl: {
                projection: 'perspective', // 使用透视投影
                autoRotate: false, // 禁用自动旋转，避免渲染问题
                distance: 150 // 观察距离，使图形更易看清
            }
        };

        // 明确设置3D坐标轴，避免坐标轴不显示
        fullConfig.xAxis3D = {
            name: 'X轴',
            type: 'value',
            scale: true,
            // 限制轴的范围，便于查看
            min: -2,
            max: 2
        };

        fullConfig.yAxis3D = {
            name: 'Y轴',
            type: 'value',
            scale: true,
            min: -2,
            max: 2
        };

        fullConfig.zAxis3D = {
            name: 'Z轴',
            type: 'value',
            scale: true,
            min: 0,
            max: 3
        };

        console.log('3D路径图最终配置：', JSON.stringify(fullConfig));

        // 更新内部配置状态
        setChartConfig(fullConfig);
    }, [chartConfig, testData]);

    return (
        <div style={{ height, width }}>
            <ChartBase
                ref={chartRef}
                option={chartConfig}
                data={testData} // 使用测试数据
                dataConfig={dataConfig}
                theme={theme}
                renderer="canvas"
            />
        </div>
    );
};

export default Path3DChart;